import { Piano } from '../piano/Piano';
import React from 'react';
import './App.css';

interface AppState {
  start: boolean
}

const requestFullscreen = () => {
  const root = document.documentElement;
  if (root.requestFullscreen) {
    root.requestFullscreen()
  } else if ((root as any).msRequestFullscreen) {
    (root as any).msRequestFullscreen()
  } else if ((root as any).mozRequestFullScreen) {
    (root as any).mozRequestFullScreen()
  } else if ((root as any).webkitRequestFullScreen) {
    (root as any).webkitRequestFullScreen()
  }
}

class App extends React.Component<{}, AppState> {

  state: AppState = {
    start: false
  };

  start = () => {

    requestFullscreen();

    this.setState({
      start: true
    });
  }

  render = () => {
    return (
      <div className="App">
        {
          this.state.start ? <Piano></Piano> : (
            <div>
              <div className="cover-icon"></div>
              <div className="start-button" onClick={this.start}>点击开始练习</div>
            </div>
          )
        }
      </div>
    );
  }
}

export default App;
